import React, { Component } from 'react'
import axios from 'axios';
export default class Server extends Component {
    seachInter=()=>{
        //获取用户的搜索词，这个时候绑定对象不在我们作用的本身上，就容易拿不到，这样我放一个节点才可以拿到.利用ref
            // console.log(this.keyWordEle.value);
            //连续解构赋值 const  {keyWordEle:{value}}=this;
            //连续结构赋值并且改名 const {keyWordEle:{value:data}}=this;
            const {value}=this.keyWordEle;
            //发送请求前通知APP更新状态
            this.props.upDateArr({isFrist:false,isLoading:true});
            //发送网络请求
        axios.get(`http://localhost:3000/api1/search/users?q=${value}`).then(res=>{
            // console.log('成功了',res.data);
            //数据请求回来后，关闭loading
            this.props.upDateArr({isLoading:false,users:res.data.items});
        },err=>{
            //数据请求失败，关闭loading
            this.props.upDateArr({isLoading:false,err:'请求出错了'});
            console.log('成功了',err);
        })
    }
    render() {
        
        return (
            <div>
                <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索githup客户</h3>
                <div>
                <input ref={c=>{this.keyWordEle=c}} type="text" placeholder="enter the name you search" />
                &nbsp;<button onClick={this.seachInter}>搜索</button>
                </div>
            </section>
            </div>
        )
    }
}
